<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 50px;
        }
        div{
            width: .2rem;
            height: .2rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // onresize 当屏幕大小发生变化时触发的事件
        // 设计路的主流标准是750
        window.onresize = function() {
            var docEl = doc.documentElement,
                resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                recalc = function() {
                    if (docEl.clientWidth > 750) {
                        docEl.style.fontSize = "100px";
                        doc.getElementById("app").style.width = "750px";
                    } else {
                        var width = docEl.clientWidth / 7.5;
                        docEl.style.fontSize = width + "px";
                        doc.getElementById("app").style.width = "auto";
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
        }
        // window.addEventListener('click', function() {

        // })
        // document.onclick = function() {

        // }
        // document.addEventListener('click', function() {
        //     console.log(1)
        // })
        window.addEventListener('resize', function() {
            var width = document.documentElement.clientWidth / 7.5;
            document.documentElement.style.fontSize = width + "px";
        })
    </script>
</body>
</html>